<template>
	<view class="content">
		<text id="tv-title">请绑定持卡人本人的银行卡 并填写正确的开户行</text>
		<view class="card">
			<view class="card-line">
				<view>
					<text class="title">持卡人</text> <text class="anserone">{{userBean.store.name}}</text>
				</view>

				<image class="image" src="../../static/finance/iv_ti_xing_icon.png" @click="showInfo"></image>
			</view>

			<view class="line" style=" margin-left: 30rpx; margin-right: 30rpx;"></view>

			<view class="card-line">
				<view style="display: flex; align-items: center;">
					<text class="title">卡号</text> <input class="anser-input" placeholder="请输入银行卡号" type="number"
						:value="bankNumber" @input="inputBankNumber"></input>
				</view>

				<image class="image" src="../../static/finance/iv_xiang_ji_icon.png"></image>
			</view>
			<view class="line" style=" margin-left: 30rpx; margin-right: 30rpx;"></view>

			<view class="card-line">
				<view style="display: flex; align-items: center; width: 100%;">
					<text class="title">银行</text> <input class="anser-input" placeholder="请输入银行名称(例如:交通银行)" type="text"
						:value="bankName" @input="inputBankName" style="width: 80%;"></input>
				</view>

				<image class="image" src="../../static/finance/iv_ti_xing_icon.png" @click="showInfo"></image>
			</view>
			<view class="line" style=" margin-left: 30rpx; margin-right: 30rpx;"></view>

			<view class="card-line">
				<view style="display: flex; align-items: center; flex: 1; width: 100%;">
					<text class="title">开户行</text>
					<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" @change="onPickerChange"
						:value="multiIndex" :range="multiArray" class="anser" :style="{'color':bankKhColor}"
						style="display: flex; ">
						<view class="uni-input" style="flex: 1; width:70vw; align-items: center;">{{bankKhArea}}</view>
					</picker>

				</view>

				<image class="image" src="../../static/finance/iv_ti_xing_icon.png" @click="showInfo()"></image>
			</view>

			<view class="line" style=" margin-left: 30rpx; margin-right: 30rpx;"></view>
			<view class="card-line">
				<view style="display: flex; align-items: center; flex: 1; width: 100%;">
					<text class="title">支行</text>

					<picker style="display: flex;" @change="khhPickerChange" :value="zhIndex" :range="zhArray"
						range-key="lname" class="anser">
						<view class="uni-input" :style="{color: zBankColor}" @click="clickZh"
							style="flex: 1; width:80vw; align-items: center;">{{zhName}}
						</view>
					</picker>
				</view>

			</view>
		</view>

		<button @click="goStep" id="btnGoSetp"
			style=" margin-left: 30rpx; margin-right: 30rpx; background-color: #3280F5; color: white; margin-top: 80rpx; font-size: 30rpx;">下一步</button>

		<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType"  confirmText="我知道了" title="持卡人说明" content="为了资金安全，只能绑定当前实名认证人的银行卡" @confirm="dialogConfirm"
			></uni-popup-dialog>
			</uni-popup>

	</view>
</template>

<script>
	import api from "@/api/api.js";
	import ajax from "@/api/api.js";
	import url from '@/api/url.js';

	export default {
		data() {
			return {
				txBean: {},
				bankNumber: '',
				bankName: '',
				zBankColor: '#999',
				bankKhColor: '#999',
				bankKhArea: '开户行地区',
				zhName: '请选择支行',
				bankZName: '请选择支行',
				//pick数据
				multiArray: [
					[],
					[]

				],
				zhArray: [],
				multiIndex: [0, 0],
				listP: [],
				listC: [],
				selectP: {},
				selectC: null,
				selectZ: null,
				userBean: {},
				pPositon: 0,
				zhIndex: 0,

			};

		},

		onLoad() {
			this.getBankAreaByProvince(),
				this.getBankAreaByCity(1),
				this.getUserIndex()
		},

		methods: {
			inputBankNumber(event) {
				this.bankNumber = event.detail.value
			},
			inputBankName(event) {
				this.bankName = event.detail.value
			},


			/**
			 * 点击下一步
			 */
			goStep() {
				console.log(typeof this.selectC)
				if (this.bankNumber.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写银行卡号'
					})
					return
				}

				if (this.bankName.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请填写银行名称'
					})
					return
				}


				if (this.selectC == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择开户行'
					})
					return
				}

				if (this.selectZ == null) {
					uni.showToast({
						icon: 'none',
						title: '请选择支行'
					})
					return
				}
				
				this.$londing();
				ajax(url.myBankAdd, {
					data: {
						is_xcx: 1,
						bank_name:this.bankName,
						bank_sn: this.bankNumber,
						bank_user: this.userBean.store.name,
						bank_kh: this.selectP.name+" "+this.selectC.name,
						bank_zhi: this.selectZ.lname,
						bank_lhh: this.selectZ.bank_code
					}
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return;
					}
					
					uni.navigateBack()


				}).catch(err => {
					console.log(err)
				});

			},

			/**
			 * @param {Object} event pick点击完成后的回调函数
			 */
			onPickerChange(event) {
				// 处理选择器变化事件
				const selectedValue = event.detail.value;
				console.log(selectedValue);
				// 执行其他操作
				selectedValue[0][selectedValue[1]]
				const sheng = this.multiArray[0][selectedValue[0]]
				console.log("我是省：" + this.listP[selectedValue[0]].name)
				this.selectP = this.listP[selectedValue[0]]
				const shi = this.multiArray[1][selectedValue[1]]
				this.selectC = this.listC[selectedValue[1]]
				console.log("我是市：" + this.listC[selectedValue[1]].name)
				this.bankKhArea = this.selectP.name + "  " + this.selectC.name
				this.bankKhColor = "#333"

				this.getBankLhh()
			},


			/**
			 * @param {Object} e pick 滑动监听方法
			 */
			bindMultiPickerColumnChange: function(e) {
				console.log('修改的列为：' + e.detail.column + '，值为：' + e.detail.value)

				switch (e.detail.column) {
					case 0: //拖动第1列
						this.pPositon = e.detail.value
						this.getBankAreaByCity(this.listP[e.detail.value].id)

						break
					case 1: //拖动第2列
						this.cPositon = e.detail.value
						break
				}

			},

			/**
			 * @param {Object} e 支行pick点击完成后的回调函数
			 */
			khhPickerChange(e) {
				this.selectZ = this.zhArray[e.detail.value]
				this.zBankColor = '#333'
				this.zhName = this.selectZ.lname

			},

			/**
			 * 获取银行地区省
			 */
			getBankAreaByProvince() {
				ajax(url.getBankArea, {
					data: {
						// #ifdef MP-WEIXIN
						// #endif
						is_xcx: 1,

					}
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return;
					}
					this.listP = res.data.data
					console.log("res.data.data=====>" + JSON.stringify(this.multiArray[0]))
					for (var p of this.listP) {
						// console.log("我是省=======p>" + JSON.stringify(p))
						this.multiArray[0].push(p.name)
					}

					// console.log("我是multiArray[0]" + JSON.stringify(this.multiArray[0]))
					// console.log("我是this.listP" + JSON.stringify(that.listP))

				}).catch(err => {
					console.log(err)
				});
			},


			/**
			 * 获取银行地区市
			 */
			getBankAreaByCity(id) {
				ajax(url.getBankArea, {
					data: {
						is_xcx: 1,
						type: 2,
						id: id
					}
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return
					}
					this.listC = res.data.data
					this.multiArray[1].length = 0;
					console.log("获取到的市数组：====================================>" + JSON.stringify(this.listC))
					for (var c of this.listC) {
						this.multiArray[1].push(c.name)
					}

					//解决h5中第一列回弹
					// #ifdef H5
					this.multiIndex[0] = this.pPositon
					// #endif


				}).catch(err => {
					console.log(err)
				})
			},

			getUserIndex: function() {
				ajax(url.userIndex, {
					data: {
						is_xcx: 1,
					}
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return

					}

					this.userBean = res.data.data

				}).catch(res => {
					console.log(err)
				})
			},

			getBankLhh: function() {
				ajax(url.getBankLhh, {
					data: {
						is_xcx: 1,
						bank_name: this.bankName,
						areacode: this.selectC.areacode
					}
				}).then(res => {
					if (res.data.code != 1) {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						return

					}
					this.zhArray = res.data.data
					console.log("zhArray?????" + JSON.stringify(res.data.data))


				}).catch(err => {
					console.log(err)
				})
			},

			//点击支行列表按钮
			clickZh: function() {
				console.log("areacode==" + this.selectC.areacode + "bank_name====" + this.bankName)
				this.getBankLhh()
			},
			
			showInfo(){
				this.$refs.alertDialog.open('warn')
			}


		}
	}
</script>

<style lang="scss">
	.content {
		background-color: $app-page-color;
		height: 100vh;
		display: flex;
		flex-direction: column;

		#tv-title {
			color: #666;
			margin-bottom: 25rpx;
			margin-top: 25rpx;
			margin-left: 30rpx;
		}

		.card {
			background-color: white;

			.card-line {
				justify-content: space-between;
				margin-left: 30rpx;
				align-items: center;
				height: 93rpx;
				display: flex;
				flex-direction: row;

				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
					line-height: 0rpx;
				}

				.anserone {
					font-size: 32rpx;
					margin-left: 30rpx;
					font-weight: 500;
					color: #999999;
					line-height: 0rpx;
				}

				.anser {
					font-size: 32rpx;
					margin-left: 32rpx;
					font-weight: 500;
					color: #666;
					line-height: 0rpx;
				}

				.anser-input {
					color: #333333;
					font-size: 32rpx;
					margin-left: 32rpx;

				}

				.image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 30rpx;
				}


			}
		}
	}
</style>